Die Aufgabenstellung für die Prüfungsaufgabe ist eine Website für ein Reisebüro zu erstellen, um das erlernte Wissen aus den Bereichen Bildbearbeitung und Programmierung des SGD Kurses Web - Design anzuwenden.

Die Website muss mindestens aus der Homepage ("index.html") und weiteren vier Unterseiten bestehen. Außerdem soll ein Preisrätsel programmiert werden.

Das Design ist frei wählbar, soll aber einheitlich aussehen und zur Corporate Identity des Reisebüros passen.

• Folgende Elemente müssen umgesetzt und in die Website eingebaut sein:
• - individuelles Reisebüro-Design


• - eine Kontakt-Seite mit einem Formular, welches die Felder enthält:
• * Name
• * Vorname
• * Telefonnummer
• * E-Mail
• * mehrzeiliges Eingabefeld
• * Geschlecht
• * Auswahlfeld für verschiedenen Reiseangebote
• * Newsletter abonnieren
• * Die Pflichtfelder sollen auf die richtige Eingabe überprüft werden.
• * auf der Antwortseite werden die Inhalte des Formulars mit PHP ausgelesen und in dieser Form abgebildet :

  Sehr geehrter Herr ... bzw. je nach Geschlecht, Sehr geehrte Frau ..., vielen Dank für Ihre Anfrage, Sie interessieren sich für ... Wir setzen uns so bald wie möglich mit Ihnen in Verbindung , Ihr Reiseteam XYZ.




• - Stylesheets in externer CSS-Datei


• - Die Navigation der Website bildet eine Liste mit Links ab, wenn die Maus oder der Finger den Link "Reiseziele" berührt.
• - 3 der bereitgestellten Bilder wurden verfremdet und müssen bearbeitet werden.


• - auf einer Seite gibt es ein Quiz bestehend aus 6 Bildern von Sehenswürdigkeiten. Ein kleines Formular stellt zwei Fragen, die vom Benutzer beantwortet werden können. Unten wird die aktuelle Ortszeit anhand der Systemzeit ausgerechnet und abgebildet. Beim Klick auf den Link oder Button werden die Antworten ausgewertet und man kann die nächste Quizfrage beantworten. Am Ende sollen die richtigen Antworten addiert werden. Das Design kann individuell gestaltet werden. Die Programmierung soll möglichst vollständig mit JavaScript gelöst werden.


• - Für das Quiz können die zur Verfügung gestellten Fotos verwendet werden. Copyright und Lizensen für andere Fotos, Musik, Frameworks, etc befinden sich unten auf dieser Seite.


• - Das Design der Website ist Teil der Aufgabenstellung. Gefordert ist ein homogenes Design. Alle Einzelseiten sollten die gleichen Gestaltungsmerkmale aufweisen um die Website optisch zusammenzuhalten. Das Logo soll auf jeder Seite erscheinen und immer am gleichen Platz befindet.


• - Alle Dateien müssen auf CD gebrannt und mit den Prüfungsunterlagen eingeschickt werden.

Die Navigation muss mit Hilfe von CSS-Stylesheets erstellt sein. Für die zweite Navigationsliste (Reiseziele) soll Java-Script verwendet werden.

Auf einer Seite können die Benutzer ein kleines Quiz durchführen. Es gibt 6 Bilder von Sehenswürdigkeiten, der Benutzer soll erraten, in welcher Stadt diese zu finden sind. Die zweite Frage soll als Zahl eingegeben werden, der Benutzer soll schätzen, wie viele Einwohner die Stadt hat.

Hier müssen Sie bei einer Überschätzung eine andere Antwort angeben als bei einer Unterschätzung. Unten wird die Ortszeit anhand der Systemzeit und der Berechnung der jeweiligen Zeitzone angezeigt. Ein Klick auf "Weiterraten" zeigt das nächste Bild mit den gleichen Fragen. Am Ende gibt es vielleicht einen Gewinn, das können Sie ganz nach Ihrer Fantasie ausschmücken. Sie müssen das Quiz nicht exakt so gestalten wie die hier gezeigten Beispiele.

1. Man denkt sich ein schönes Design aus und legt dann los.
2. Vorlauf und Basisarbeit -> Konzeption und Gestaltung -> Vorlagen und Grafiken -> Umsetzung und Produktion -> Test und Publikation
3. Vorlagen und Grafiken -> Konzeption und Gestaltung -> Test und Produktion -> Umsetzung und Publikation
4. Das Fünf-Phasen-Modell

4Pkt.

1. Farbformat, Urheberrechte, Dateiformat
2. Fotos müssen möglichst groß abgebildet werden.
3. Fotos müssen mit einer Spiegelreflexkamera aufgenommen worden sein.
4. Wasserzeichen, Papierformat

4Pkt.

1. Ohne Stylesheets würde eine Website nicht richtig funktionieren.
2. Weil sie die Webseite für Suchmaschinen besser auffindbar machen.
3. Weil Webseiten heute auf verschieden en Geräten abgebildet werden.
4. Sonst würde eine ausgedruckte Seite schlecht lesbar sein.

4Pkt.

1. Damit die Website schneller geladen wird.
2. Damit die Zielgruppe die Website leichter finden kann.
3. Weil damit Computerviren erkannt werden.
4. Um die Website in den Suchlisten weiter nach vorn zu bringen .

4Pkt.

1. Suchmaschinen werten vor allem Text an prominenter Stelle wie Überschriften.
2. Die meta-Tags sollten möglichst ausführlich verwendet werden.
3. Bilder sollten alternativen Text verwenden.
4. Der Code sollte möglichst schlank gestaltet werden durch eine Trennung des HTML-Vokabulars von CSS und anderen Skripten.

4Pkt.

1. Die Webseite wird interaktiver.
2. Die Funktionalität wird auf verschiedenen Browsern gewährleistet.
3. Die Ladezeiten der JavaScript-Codes wird beschleunigt.
4. Die Webseiten können besser für mobile Geräte optimiert werden.

4Pkt.

1. Die Tabelle muss in einen Kopf-, Fuß- und Körperbereich eingeteilt werden.
2. Die Kopfzellen müssen einen logischen Bezug zu den Körperzellen haben.
3. Die Überschrift sollte als Bestandteil der Tabelle definiert sein.
4. Die Gestaltung der Tabelle sollte mit CSS formatiert sein.

4Pkt.

Javascript und CSS sind unterstützende Techniken für barrierefreie Seiten. Sie sind keine zwingenden Voraussetzungen für die Barrierefreiheit. Als unterstützende Techniken sollten sie aber benutzt werden. Im Sinne des Progressive Enhancement muss aber gewährleistet sein, dass die Seite auch ohne Javascript und CSS ohne Einschränkungen genutzt werden kann. Daher sind alle Antworten als zutreffend zu werten.

1. Sie sollten möglichst die Formulareingaben mit Javascript überprüfen.
2. Die Formulare sollten in Bereiche gegliedert werden.
3. Die Beschriftungen sollten einen logischen Bezug zu den Formularelementen haben.
4. Die Formularelemente sollten mit CSS gestaltet werden.

4Pkt.

Javascript und CSS sind unterstützende Techniken für barrierefreie Seiten. Sie sind keine zwingenden Voraussetzungen für die Barrierefreiheit. Als unterstützende Techniken sollten sie aber benutzt werden. Im Sinne des Progressive Enhancement muss aber gewährleistet sein, dass die Seite auch ohne Javascript und CSS ohne Einschränkungen genutzt werden kann. Daher sind alle Antworten als zutreffend zu werten.

1. Damit können Korrekturen im gesamten Tonwertbereich eines Bildes vorgenommen werden.
2. Damit sind die Farben in einzelnen Kanälen korrigierbar.
3. Damit können die Pixel in einem Bild vergrößert oder verkleinert werden.
4. Damit kann die Bildschärfe stufenlos verändert werden.

4Pkt.

1. Indem man die Objekte gruppiert und anschließend einen Verlauf definiert.
2. Indem man die Objekte aktiviert und dann das Verlaufswerkzeug anklickt.
3. Indem man jedem Objekt einen Verlauf zuordnet und ihn anschließend optisch anpasst.
4. Indem man die Objekte über "Pfade kombinieren" miteinander verbindet und anschließend einen Verlauf definiert.

4Pkt.

1. Als kodierte Zeichenkette (z.B . application/x-www-form-urlencoded)
2. Als reiner Text, wenn sie als E-Mail weiterversendet werden (text/plain).
3. Hier muss kein Kodierungstyp festgelegt werden. Standardmäßig werden die Formulardaten immer in der richtigen Kodierung versendet.
4. Mit der Methode post.

4Pkt.

1. Mit der Methode post.
2. document.forms[0].getElementByid("vorname")
3. document.forms[0].vorname
4. $_POST["vorname"]

4Pkt.

Bevor Sie nun mit der Arbeit an der Website beginnen, nehmen Sie sich die drei vorbereiteten Fotos vor. Die Motive Australien, Big Ben und Strand müssen bearbeitet und in der Website verwendet werden.

• 1. Das Foto "Australien" soll Patina und die Anmutung einer alten vergilbten Postkarte bekommen. Stellen Sie sich ein altes Schwarzweiß-Foto vor, das im Laufe der Zeit vergilbt ist. Für die Lösung der Aufgabe genügt es nicht, das Farbfoto in Schwarz-Weiß umzuwandeln.

  

  Mit der Maus über das Bild fahren. um es zu Vergrößern.




• 2. Beim Foto "Big Ben" haben Sie das Problem sicherlich gleich erkannt, den roten Himmel. Ihre Aufgabe ist es nun, den Himmel wieder schön sommerlich blau einzufärben. Achten Sie darauf, dass sich das Gebäude nicht mit verfärbt.

  

  Mit der Maus über das Bild fahren. um es zu Vergrößern.




• 3. Während der Aufnahme vom Bild "Strand" sind Personen durchs Bild gelaufen. Die sollen Sie nun wegretuschieren, damit hinterher wieder nur ein einsamer Strand zu sehen ist.

  

  Mit der Maus über das Bild fahren. um es zu Vergrößern.

Bewertungskriterien für die fertiggestellte Webseite:

• Wurden die bereitgestellten Bilder entsprechend der Vorgaben bearbeitet?




• Haben die Seiten eine HTML-Struktur, die auch ohne CSS gut lesbar ist?




• Wurden die Gestaltungsvorgaben in einer externen CSS-Datei umgesetzt?




• Sind alle Seiten innerhalb der Website miteinander verlinkt und funktioniert die Navigation fehlerfrei?




• Funktionieren das Formular auf der Kontakt-Seite und die Antwort?




• Ist das Quiz umgesetzt?




• Hat die Website ein homogenes und auf allen Unterseiten wiedererkennbares Design?




• Wurde das Reisebüro-Logo auf allen Seiten eingesetzt?